<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新野蛮主义设计风格展示</title>
    <style>
        /* 基础样式与变量定义 */
        :root {
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --accent: #FFE66D;
            --dark: #292F36;
            --light: #F7FFF7;
            --border-width: 4px;
            --shadow-offset: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            padding: 20px;
            line-height: 1.6;
        }

        /* 新野蛮主义核心样式类 */
        .neu-card {
            border: var(--border-width) solid var(--dark);
            border-radius: 12px;
            background-color: white;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
        }

        .neu-card:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .neu-button {
            display: inline-block;
            padding: 12px 24px;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            background-color: var(--primary);
            color: var(--dark);
            font-weight: bold;
            text-decoration: none;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .neu-button:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .neu-button.secondary {
            background-color: var(--secondary);
        }

        .neu-button.accent {
            background-color: var(--accent);
        }

        /* 布局样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 40px;
            border-bottom: var(--border-width) solid var(--dark);
        }

        .logo {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary);
            text-shadow: 3px 3px 0px var(--dark);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        nav a {
            text-decoration: none;
            color: var(--dark);
            font-weight: bold;
            padding: 8px 16px;
            border: var(--border-width) solid transparent;
            transition: all 0.2s ease;
        }

        nav a:hover {
            border: var(--border-width) solid var(--dark);
            background-color: var(--accent);
        }

        .hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .hero-image {
            background-color: var(--secondary);
            border: var(--border-width) solid var(--dark);
            border-radius: 12px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
        }

        .features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 60px;
        }

        .feature-card {
            padding: 30px;
        }

        .feature-card h3 {
            margin-bottom: 15px;
            font-size: 1.5rem;
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background-color: var(--accent);
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

        .testimonials {
            margin-bottom: 60px;
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        .testimonial-card {
            padding: 25px;
        }

        .testimonial-text {
            font-style: italic;
            margin-bottom: 15px;
        }

        .testimonial-author {
            font-weight: bold;
        }

        footer {
            text-align: center;
            padding: 30px 0;
            border-top: var(--border-width) solid var(--dark);
            margin-top: 40px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero {
                grid-template-columns: 1fr;
            }

            .features {
                grid-template-columns: 1fr;
            }

            .testimonial-grid {
                grid-template-columns: 1fr;
            }

            header {
                flex-direction: column;
                gap: 20px;
            }

            nav ul {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="logo">NEUBRUTAL</div>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">作品</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </nav>
        </header>

        <section class="hero">
            <div class="hero-content">
                <h1>新野蛮主义设计<br>粗犷、大胆、真实</h1>
                <p>新野蛮主义是一种反传统、反完美主义的设计风格，强调原始质感、高对比度和硬朗的视觉元素。它打破了现代设计中过度打磨的惯例，创造出独特而难忘的用户体验。</p>
                <div style="margin-top: 30px;">
                    <a href="#" class="neu-button">探索作品</a>
                    <a href="#" class="neu-button secondary" style="margin-left: 15px;">了解更多</a>
                </div>
            </div>
            <div class="hero-image neu-card">
                视觉元素区域
            </div>
        </section>

        <section class="features">
            <div class="feature-card neu-card">
                <div class="feature-icon">■</div>
                <h3>粗重边框</h3>
                <p>使用明显的黑色边框定义元素边界，创造强烈的视觉分离效果。</p>
            </div>

            <div class="feature-card neu-card">
                <div class="feature-icon">▲</div>
                <h3>硬朗阴影</h3>
                <p>偏移明显、无模糊的硬阴影，为界面元素增添立体感和深度。</p>
            </div>

            <div class="feature-card neu-card">
                <div class="feature-icon">●</div>
                <h3>高对比色彩</h3>
                <p>大胆使用饱和色彩，创造视觉冲击力和品牌辨识度。</p>
            </div>
        </section>

        <section class="testimonials">
            <h2 style="text-align: center; margin-bottom: 30px; font-size: 2.5rem;">设计理念</h2>
            <div class="testimonial-grid">
                <div class="testimonial-card neu-card">
                    <p class="testimonial-text">"新野蛮主义不是关于完美，而是关于真实。它接受不完美，并将其转化为独特的美学。"</p>
                    <p class="testimonial-author">- 设计评论家</p>
                </div>

                <div class="testimonial-card neu-card">
                    <p class="testimonial-text">"在这种风格中，每个元素都像在宣告自己的存在。没有隐藏，没有伪装，只有纯粹的表达。"</p>
                    <p class="testimonial-author">- 网页设计师</p>
                </div>
            </div>
        </section>

        <section style="text-align: center; margin-bottom: 60px;">
            <h2 style="margin-bottom: 20px; font-size: 2rem;">准备好尝试新风格了吗？</h2>
            <a href="#" class="neu-button accent">立即开始</a>
        </section>

        <footer>
            <p>© 2023 新野蛮主义设计展示 | 遵循原始、大胆的设计原则</p>
        </footer>
    </div>
</body>

</html>